<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Editor de Mapas</title>
	<style>
		body {
			background-color:#444450;
			color:#BBBBBB;
			font-family:sans-serif;
		}


		.mapa {
			background-image:url("images/fundo.jpg");
			background-size: cover;
			border:1px solid black;
		}
		.output {background-color:#333344;color:#AAAAAA;}
		td {padding:16px;border:1px solid black;background-size: cover;}
		.u    {background-image:url("images/estrada/u.png");}
		.d    {background-image:url("images/estrada/d.png");}
		.l    {background-image:url("images/estrada/l.png");}
		.r    {background-image:url("images/estrada/r.png");}
		.ud   {background-image:url("images/estrada/ud.png");}
		.ul   {background-image:url("images/estrada/ul.png");}
		.ur   {background-image:url("images/estrada/ur.png");}
		.dl   {background-image:url("images/estrada/dl.png");}
		.dr   {background-image:url("images/estrada/dr.png");}
		.lr   {background-image:url("images/estrada/lr.png");}
		.udl  {background-image:url("images/estrada/udl.png");}
		.udr  {background-image:url("images/estrada/udr.png");}
		.ulr  {background-image:url("images/estrada/ulr.png");}
		.dlr  {background-image:url("images/estrada/dlr.png");}
		.udlr {background-image:url("images/estrada/udlr.png");}

		.vidro {background-image:url("images/eco_vidro.png");}
		.papel {background-image:url("images/eco_papel.png");}
		.embal {background-image:url("images/eco_embal.png");}
		.lixo  {background-image:url("images/eco_lixo.png");}

		.central  {background-image:url("images/central.png");}

		#estrada {background-image:url("images/estrada/udlr.png");}
		#caixote {background-image:url("images/ecoponto.png");}
		#central {background-image:url("images/central.png");}
		.selected {border:2px solid #FF9900;}
	</style>
	<script src="jquery-1.8.2.min.js"></script>
	<script>
		var width;
		var height;
		var tilesEstrada=new Array("vazio","u","d","l","r","ud","ul","ur","dl","dr","lr","udl","udr","ulr","dlr","udlr");
		var tilesEco=new Array("vazio","vidro","papel","embal","lixo");
		var tilesCentral=new Array("vazio","central");
		var object="estrada";

		function getTiles(obj) {
			if (obj=="estrada") {return tilesEstrada;}
			else if (obj=="caixote") {return tilesEco;}
			else if (obj=="central") {return tilesCentral;}
			return tilesEstrada;
		}

		function selectObject(obj) {
			$("#"+object).removeClass("selected");
			$("#"+obj).addClass("selected");
			object=obj;
		}


		function nextTile(y,x) {
			var tiles=getTiles(object);
			var l=tiles.length;
			for (i=0;i<l;++i) {
				if ($("#"+y+"-"+x).hasClass(tiles[i])) {
					return tiles[(i+1)%l];
				}
			}
			return tiles[0];
		}

		function changeTile(y,x) {
			var tiles=getTiles(object);
			var next=nextTile(y,x);
			$("#"+y+"-"+x).removeClass(tiles.join(" ")).addClass(next);
			generateXML();
		}

		function resizeMap(w,h) {
			width=w;
			height=h;
			var str="<table class='mapa'>";
			for (var i=0;i<h;++i) {
				str+="<tr>";
				for (var j=0;j<w;++j) {
					str+="<td class='vazio' id='"+i+"-"+j+"' onClick='changeTile("+i+","+j+");'></td>";
				}
				str+="</tr>";
			}
			str+="</table>";
			$(".mapa").replaceWith(str);
		}

		function updateSize() {
			resizeMap($("#largura").val(),$("#altura").val());
		}


		function generateXML() {
			$(".output").empty();
			for (y=0;y<height;++y) {
				for (x=0;x<width;++x) {
					generateXMLforObj("central",x,y,"");
					generateXMLforObj("estrada",x,y,"direction");
					generateXMLforObj("caixote",x,y,"type");
				}
			}
		}

		function generateXMLforObj(obj,x,y,attrname) {
			var tiles=getTiles(obj);
			for (i=1;i<tiles.length;++i) {
				if ($("#"+y+"-"+x).hasClass(tiles[i])) {
					var str;
					str='&lt;env:object type="'+obj+'"&gt;\n';
					str+='	&lt;env:property name="position"&gt;new Vector2Double('+x+', '+y+')&lt;/env:property&gt;\n';
					if (attrname!="") {
						str+='	&lt;env:property name="'+attrname+'"&gt;"'+tiles[i]+'"&lt;/env:property&gt;\n';
						if (obj=="caixote") {
							str+='	&lt;env:property name="capacity"&gt;1500&lt;/env:property&gt;\n';
							str+='	&lt;env:property name="quantity"&gt;0&lt;/env:property&gt;\n';
							str+='	&lt;env:property name="util"&gt;1&lt;/env:property&gt;\n';
						}
					}
					str+='&lt;/env:object&gt;\n';
					$(".output").append(str);
					break;
				}
			}
		}

		$(document).ready(
			function() {
				resizeMap(10,10);
			}
		);

	</script>
</head>
<body>
	<h1>Editor de Mapas</h1>
	<form>
		<label for="largura">Largura:<label><input type="text" id="largura" value="10"/>
		<label for="altura">Altura:<label><input type="text" id="altura" value="10"/>
		<a href='#' onClick='updateSize()'>Resize</a>
	</form>
	<div class="mapdiv">
		<h2>Mapa</h2>
		<table class="objectos">
			<tr>
				<td id="estrada" class="selected" onClick="selectObject('estrada')"></td>
				<td id="caixote" onClick="selectObject('caixote')"></td>
				<td id="central" onClick="selectObject('central')"></td>
			</tr>
		</table>
		<table class="mapa">
		</table>
	</div>
		<div class="outdiv">
		<h2>Output (XML)</h2>
		<pre class="output">
		</pre>
	</div>
</body>
</html>
